import React, { memo } from "react";

import { NoticeItemWrapper } from "./style";

export default memo(function NoticeItem(props) {
  const { picUrl, time, title, detail, avatar, nickname } = props.data;
  return (
    <NoticeItemWrapper>
      <div className="time">{time}</div>
      {picUrl && <img src={picUrl} alt="" className="notice-img" />}
      <div className="content">
        <div className="title">{title}</div>
        {detail && <div className="detail">{detail}</div>}
        <div className="info">
          <img src={avatar} alt="" className="info-img" />
          <span className="nickname">{nickname}</span>
        </div>
      </div>
    </NoticeItemWrapper>
  );
});
